<template>
	<view class="container">
		<view class="box">
			<view class="text">
				<image src="../../static/logo.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="LoginBox">
			<view class="login">
				<view class="zhanghao">
					<input type="text" placeholder="账号" v-model="zhanghao">
				</view>
				<view class="mima">
					<input type="text" placeholder="密码" v-model="mima">
				</view>
				<view class="btnBox">
					<view class="btn" @click="Login">
						<text>登录</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template> 
 
<script>
	export default {
		data() {
			return {
				zhanghao:"",
				mima:"",
			};
		}, 
		methods:{ 
			
			async Login(){
				let data={
					businessAccount:this.zhanghao,
					businessPassword:this.mima
				}
				const {
					data: res
				} = await uni.$http.post(`/business/login`,data);
				if (res.code !== 0) return uni.$showMsg(res.message);			
				console.log(res.data, '登录成功!');
				uni.$showMsg('登录成功!');
				uni.setStorageSync('token',res.data.token)
				uni.setStorageSync('user',res.data)
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/index/index'
					})				
				},2000) 
			} 
		}
	}
</script>	

<style lang="scss">
	page{
		background: url('https://jkht.wteam.club/file/微信图片_20231215165707.png') no-repeat;
		background-size: cover; 		
	}
	.login{
		width: 80%;
		height: 25vh;
		background-color: rgba(104, 104, 104, 0.5);
		display: flex;
		// justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 30rpx;
		.btnBox{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 3vh;
			.btn:active{
				background-color: rgba(96, 186, 204, 1.0);
			}
			.btn{				
				background-color: #31b2ff;
				height: 5vh;
				width: 50vw;
				border-radius: 10rpx;			
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
			}
		}
		.zhanghao{
			margin-top: 2vh;
			background-color: #fff;
		    height: 5vh;
			width: 50vw;
			border-radius: 10rpx;			
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.mima{
			margin-top: 2vh;
			background-color: #fff;
			height: 5vh;
			width: 50vw;
			border-radius: 10rpx;			
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.LoginBox{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 5vh;
	}
	.box{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.text{
		margin-top: 25vh;
		display: flex;
		justify-content: center;
		align-items: center;		
		font-weight: 700;
		height: 100rpx;
		width: 300rpx;
		color: #fff;
		image{
			height: 100%;
			width: 100%;
		}
	}
</style>
